<template>
  <el-card class="box-card">
    <div class="clearfix poemTitle flex-col al-left">
      <!--跳转标题-->
      <a v-if="titleUrl" href="javascript:;" @click="goPoemItem(poemData.ptitle)">{{ poemData?.ptitle }}</a>
      <!--展示标题-->
      <span v-else>{{ poemData?.ptitle }}</span>
      <!--诗人-->
      <p class="author">{{ poemData?.authors?.adynasty || poemData?.pdynasty  }}·<a href="javascript:;" @click="goAuthorItem(poemData?.authors?.aid ? poemData?.authors?.aid:poemData?.aid,poemData?.authors?.aname?poemData?.authors?.aname:poemData?.pauthor)">{{ poemData?.authors?.aname ||  poemData?.pauthor }}</a></p>
    </div>
    <div class="flex-col al-left">
      <p style="margin: 0 0 10px 0" v-html="this.poemData?.pcontent"></p>
    </div>
    <div>
      <el-tag type="success">诗词</el-tag>
    </div>
  </el-card>
</template>

<script>
import router from '@/router'

export default {
  name: "PoemBody",
  props: ['titleUrl', 'poemData'],
  methods: {
    goPoemItem(bread) {
      //在出发地印上目的地的名字
      this.$route.meta.toBreadName = bread;
      router.push(`/poemItem/${this.poemData.pid}`)
    },
    goAuthorItem(pid,bread) {
      //在出发地印上目的地的名字
      this.$route.meta.toBreadName = bread;
      router.push(`/authorItem/${pid}`)
    },
  }
}
</script>

<style lang="scss" scoped>
.box-card {
  text-align: left;
  margin-bottom: 20px;
}

.poemTitle {
  font-size: x-large;
}

.author {
  font-size: medium;
  margin-bottom: 10px;
}

</style>